<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    canvas {
      border: 2px solid #08A573;
      background-size: 100% 250%;
      background-position: center bottom;

    }
  </style>
</head>

<body>
  <!-- <div>1</div> -->
  <canvas id="canvas" width="650" height="671"></canvas>
  <script>
    var canvas = document.getElementById('canvas'),
      ctx = canvas.getContext('2d');
    ctx.translate(20, 20);
    //右手
    lineGradient(ctx, 62, 120, 164, 267, '#dcc0b5', '#e3c2bd', '#e0beb2', '#e7c7bc');
    ctx.moveTo(205, 237);
    ctx.quadraticCurveTo(140, 180, 113, 162);
    ctx.quadraticCurveTo(118, 150, 116, 142);
    ctx.quadraticCurveTo(125, 129, 111, 129);
    ctx.quadraticCurveTo(100, 130, 100, 154);
    ctx.quadraticCurveTo(98, 122, 90, 120);
    ctx.quadraticCurveTo(78, 120, 84, 155);
    ctx.quadraticCurveTo(80, 155, 80, 150);
    ctx.quadraticCurveTo(70, 110, 60, 125);
    ctx.quadraticCurveTo(60, 130, 65, 160);
    ctx.quadraticCurveTo(65, 162, 62, 160);
    ctx.quadraticCurveTo(50, 135, 40, 135);
    ctx.quadraticCurveTo(30, 140, 52, 170);
    ctx.quadraticCurveTo(48, 172, 47, 170);
    ctx.quadraticCurveTo(30, 160, 24, 165);
    ctx.quadraticCurveTo(20, 175, 45, 182);
    ctx.lineTo(49, 188);
    ctx.quadraticCurveTo(60, 250, 120, 292);
    ctx.quadraticCurveTo(190, 320, 205, 237);
    ctx.fill();
    ctx.stroke();
    ctx.beginPath();
    ctx.moveTo(92, 155);
    ctx.quadraticCurveTo(75, 150, 52, 170);
    ctx.quadraticCurveTo(60, 165, 74, 169);
    ctx.stroke();
    lineGradient(ctx, 131, 167, 55, 206, '#7c3023', '#a71c15', '#a71c15', '#8d120d');
    ctx.moveTo(125, 160);
    ctx.quadraticCurveTo(82, 152, 49, 195);
    ctx.quadraticCurveTo(54, 210, 55, 216);
    ctx.quadraticCurveTo(90, 180, 137, 175);
    ctx.quadraticCurveTo(125, 160, 125, 160);
    ctx.fill();
    ctx.stroke();
    //衣服
    ctx.translate(-20, -20);
    lineGradient(ctx, 169, 276, 422, 457, '#ddd6c6', '#d4d6c8', '#d4d5c5', '#cad5c4');
    ctx.moveTo(203, 258);
    ctx.quadraticCurveTo(135, 265, 97, 306);
    ctx.quadraticCurveTo(75, 310, 80, 319);
    ctx.quadraticCurveTo(244, 397, 336, 528);
    ctx.quadraticCurveTo(426, 443, 390, 343);
    ctx.fill();
    ctx.stroke();
    //左手
    lineGradient(ctx, 350, 400, 578, 512, '#d9bcb6', '#dfbdb1', '#e1bfb5', '#debeb3');
    ctx.moveTo(397, 350);
    ctx.bezierCurveTo(335, 360, 320, 500, 382, 472);
    ctx.quadraticCurveTo(480, 520, 494, 490);
    ctx.quadraticCurveTo(500, 542, 544, 490);
    ctx.quadraticCurveTo(585, 545, 572, 498);
    ctx.quadraticCurveTo(564, 485, 552, 480);
    ctx.quadraticCurveTo(555, 470, 555, 474);
    ctx.quadraticCurveTo(595, 495, 598, 480);
    ctx.quadraticCurveTo(585, 460, 550, 454);
    ctx.quadraticCurveTo(585, 435, 565, 420);
    ctx.quadraticCurveTo(555, 432, 535, 440);
    ctx.quadraticCurveTo(466, 375, 390, 352);
    ctx.fill();
    ctx.stroke();
    ctx.beginPath();
    ctx.moveTo(530, 505)
    ctx.quadraticCurveTo(575, 556, 539, 495);
    ctx.fill();
    ctx.stroke();
    ctx.beginPath();
    ctx.moveTo(530, 505);
    ctx.quadraticCurveTo(560, 475, 552, 471);
    ctx.stroke();
    ctx.beginPath();
    ctx.moveTo(535, 440);
    ctx.quadraticCurveTo(540, 465, 524, 470);
    ctx.stroke();
    lineGradient(ctx, 535, 430, 485, 512, '#922c2a', '#b41e1d', '#b41c19', '#b61b16');
    ctx.moveTo(501, 513);
    ctx.quadraticCurveTo(475, 455, 542, 437);
    ctx.quadraticCurveTo(535, 430, 515, 422);
    ctx.quadraticCurveTo(435, 455, 477, 522);
    ctx.closePath();
    ctx.fill();
    ctx.stroke();


    //裤子
    lineGradient(ctx, -50, 286, 340, 600, '#404c96', '#3d4693', '#39418c', '#3f4694');
    ctx.moveTo(-50, 286);
    ctx.quadraticCurveTo(15, 300, 55, 335);
    ctx.quadraticCurveTo(250, 420, 350, 553);
    ctx.quadraticCurveTo(340, 600, 340, 600);
    ctx.lineTo(-50, 600);
    ctx.closePath();
    ctx.fill();
    ctx.stroke();
    ctx.beginPath();
    ctx.moveTo(40, 370);
    ctx.quadraticCurveTo(40, 350, 55, 345);
    ctx.quadraticCurveTo(40, 350, 35, 345);
    ctx.stroke();
    //裤带
    lineGradient(ctx, 65, 330, 328, 540, '#acc3c9', '#acc1c6', '#a8c2c1', '#abbcc4');
    ctx.moveTo(80, 319);
    ctx.quadraticCurveTo(244, 397, 336, 528);
    ctx.lineTo(325, 544);
    ctx.quadraticCurveTo(289, 490, 170, 427);
    ctx.quadraticCurveTo(141, 405, 55, 344);
    ctx.quadraticCurveTo(54, 330, 65, 330);
    ctx.quadraticCurveTo(65, 315, 80, 319);
    ctx.fill();
    ctx.stroke();
    //蝴蝶结
    lineGradient(ctx, 78, 360, 209, 497, '#a9c0c6', '#a4c0c3', '#aabec7', '#a3bcc0');
    ctx.moveTo(78, 360);
    ctx.quadraticCurveTo(120, 355, 162, 366);
    ctx.quadraticCurveTo(182, 355, 188, 375);
    ctx.quadraticCurveTo(225, 365, 214, 400);
    ctx.quadraticCurveTo(215, 408, 210, 409);
    ctx.quadraticCurveTo(222, 465, 209, 497);
    ctx.quadraticCurveTo(120, 485, 141, 465);
    ctx.quadraticCurveTo(148, 453, 170, 430);
    ctx.quadraticCurveTo(130, 438, 145, 405);
    ctx.quadraticCurveTo(115, 435, 81, 436);
    ctx.quadraticCurveTo(55, 445, 78, 360);
    ctx.fill();

    ctx.stroke();
    ctx.beginPath();
    ctx.moveTo(145, 405);
    ctx.quadraticCurveTo(145, 375, 163, 366);
    ctx.stroke();
    ctx.beginPath();
    ctx.moveTo(170, 430);
    ctx.quadraticCurveTo(197, 424, 210, 410);
    ctx.stroke();
    ctx.beginPath();
    ctx.moveTo(188, 375);
    ctx.quadraticCurveTo(155, 385, 155, 404);
    ctx.stroke();
    ctx.beginPath();
    ctx.moveTo(191, 424);
    ctx.quadraticCurveTo(185, 475, 197, 449);
    ctx.stroke();
    //脸
    lineGradient(ctx, 442, 90, 270, 340, '#dfb9b6', '#e2c0b6', '#e0beb5', '#d4b7a7');
    ctx.moveTo(246, 175);
    ctx.quadraticCurveTo(225, 206, 204, 228);
    ctx.quadraticCurveTo(192, 260, 215, 293);
    ctx.quadraticCurveTo(280, 370, 345, 360);
    ctx.quadraticCurveTo(402, 355, 472, 246);
    ctx.quadraticCurveTo(477, 127, 373, 74);
    ctx.quadraticCurveTo(313, 63, 271, 122);
    ctx.quadraticCurveTo(259, 149, 246, 175);

    ctx.fill();
    ctx.stroke();
    //脸颊
    lineGradient(ctx, 403, 250, 322, 360, '#c48484', '#c48081', '#cd8183', '#cf7e7d');
    ctx.moveTo(403, 250);
    ctx.quadraticCurveTo(372, 286, 346, 291);
    ctx.quadraticCurveTo(365, 341, 322, 360);
    ctx.quadraticCurveTo(356, 360, 364, 355);
    ctx.quadraticCurveTo(430, 320, 403, 250);
    ctx.fill();
    //眉毛
    ctx.fillStyle = '#000';
    ctx.beginPath();
    ctx.moveTo(413, 233);
    ctx.quadraticCurveTo(405, 240, 407, 224);
    ctx.quadraticCurveTo(399, 186, 360, 189);
    ctx.quadraticCurveTo(420, 180, 413, 233);
    ctx.fill();
    ctx.beginPath();
    ctx.moveTo(286, 139);
    ctx.quadraticCurveTo(285, 147, 295, 142);
    ctx.quadraticCurveTo(324, 125, 345, 167);
    ctx.quadraticCurveTo(332, 112, 286, 139);
    ctx.fill();
    //鼻子
    ctx.beginPath();
    ctx.moveTo(311, 232);
    ctx.quadraticCurveTo(305, 230, 303, 238);
    ctx.stroke();
    //嘴巴
    var lineGradient2 = ctx.createRadialGradient(272, 295, 15, 282, 270, 90);
    lineGradient2.addColorStop(0, '#8e244a');
    lineGradient2.addColorStop(1, '#7d2c3f');
    ctx.fillStyle = lineGradient2;
    ctx.beginPath();
    ctx.moveTo(254, 235);
    ctx.quadraticCurveTo(228, 225, 220, 240);
    ctx.quadraticCurveTo(214, 252, 215, 272);
    ctx.quadraticCurveTo(230, 325, 310, 346);
    ctx.quadraticCurveTo(355, 345, 335, 302);
    ctx.quadraticCurveTo(300, 280, 254, 235);
    ctx.fill();
    ctx.stroke();
    //舌头
    lineGradient(ctx, 245, 292, 233, 352, '#c3557a', '#be4e74', '#c44d75', '#c15177');
    ctx.moveTo(248, 301);
    ctx.quadraticCurveTo(242, 280, 219, 292);
    ctx.quadraticCurveTo(198, 315, 215, 340);
    ctx.quadraticCurveTo(250, 365, 280, 335);
    ctx.quadraticCurveTo(285, 295, 238, 315);
    ctx.quadraticCurveTo(252, 310, 248, 301);
    ctx.fill();
    ctx.stroke();

    //眼睛
    eyes(ctx, 'rotate');
    eyes(ctx, '');
    //头发
    ctx.rotate(-20 * Math.PI / 180);
    ctx.transform(1, 0, 0, 1, -88, 80);
    ctx.beginPath();
    ctx.fillStyle = "#020b08";
    ctx.moveTo(240, 166);
    ctx.quadraticCurveTo(240, 122, 200, 92);
    ctx.quadraticCurveTo(240, 90, 260, 115);
    ctx.quadraticCurveTo(254, 75, 202, 42);
    ctx.quadraticCurveTo(270, 50, 295, 70);
    ctx.quadraticCurveTo(285, 20, 250, 0);
    ctx.quadraticCurveTo(285, 0, 320, 0);
    ctx.quadraticCurveTo(355, 15, 363, 42);
    ctx.quadraticCurveTo(445, -30, 550, 15);
    ctx.quadraticCurveTo(485, 10, 454, 68);
    ctx.quadraticCurveTo(520, 30, 580, 80);
    ctx.quadraticCurveTo(510, 85, 488, 123);
    ctx.quadraticCurveTo(535, 200, 488, 287);
    ctx.quadraticCurveTo(522, 300, 560, 315);
    ctx.quadraticCurveTo(510, 318, 470, 326);
    ctx.quadraticCurveTo(514, 340, 570, 361);
    ctx.quadraticCurveTo(478, 375, 385, 360);
    ctx.quadraticCurveTo(453, 307, 404, 296);
    ctx.quadraticCurveTo(382, 300, 355, 326);
    ctx.quadraticCurveTo(374, 304, 385, 299);
    ctx.quadraticCurveTo(380, 299, 365, 305);
    ctx.quadraticCurveTo(393, 284, 406, 275);
    ctx.quadraticCurveTo(392, 277, 365, 287);
    ctx.quadraticCurveTo(415, 240, 440, 203);
    ctx.quadraticCurveTo(404, 228, 350, 245);
    ctx.quadraticCurveTo(400, 210, 425, 154);
    ctx.quadraticCurveTo(376, 128, 304, 200);
    ctx.quadraticCurveTo(330, 140, 384, 95);
    ctx.quadraticCurveTo(325, 90, 288, 122);
    ctx.quadraticCurveTo(264, 159, 240, 185);
    ctx.quadraticCurveTo(247, 170, 240, 166);
    ctx.fill();
    //右耳
    lineGradient(ctx, 241, 155, 211, 224, '#d9bcb8', '#d9b7ad', '#dec1b9', '#dbbcb7');
    ctx.moveTo(245, 180);
    ctx.bezierCurveTo(265, 120, 190, 155, 202, 234);
    ctx.quadraticCurveTo(224, 208, 245, 180);
    ctx.fill();
    ctx.stroke();
    ctx.beginPath();
    ctx.moveTo(234, 182);
    ctx.quadraticCurveTo(243, 165, 219, 175);
    ctx.stroke();
    ctx.beginPath();
    ctx.moveTo(236, 178);
    ctx.quadraticCurveTo(240, 158, 225, 166);
    ctx.stroke();
    ctx.beginPath();
    ctx.moveTo(236, 190);
    ctx.quadraticCurveTo(220, 182, 210, 223);
    ctx.stroke();
    //左耳
    lineGradient(ctx, 408, 279, 371, 365, '#b89899', '#cb7f81', '#c97e85', '#ca7980');
    ctx.moveTo(360, 322);
    ctx.quadraticCurveTo(390, 295, 402, 297);
    ctx.quadraticCurveTo(435, 290, 421, 325);
    ctx.quadraticCurveTo(375, 380, 360, 365);
    ctx.closePath();
    ctx.fill();
    ctx.beginPath();
    ctx.moveTo(415, 312);
    ctx.quadraticCurveTo(402, 300, 375, 325);
    ctx.quadraticCurveTo(412, 315, 370, 353);
    ctx.stroke();
    ctx.beginPath();
    ctx.moveTo(360, 364);
    ctx.quadraticCurveTo(370, 374, 393, 356);
    ctx.stroke();


    function eyes(ctx, transition) {
      if (transition == 'rotate') {
        ctx.rotate(50 * Math.PI / 180);
        ctx.transform(-1, 0, 0, 1, 700, -310);
      } else {
        ctx.rotate(30 * Math.PI / 180);
        ctx.transform(-1, 0, 0, 1, 705, -195);
      }
      var lineGradient1 = ctx.createLinearGradient(294, 184, 287, 199);
      lineGradient1.addColorStop(0, '#e1c1b6');
      lineGradient1.addColorStop(1, '#e9cbc3');
      ctx.fillStyle = lineGradient1;
      ctx.strokeStyle = '#000';
      ctx.beginPath();
      ctx.moveTo(312, 205);
      ctx.quadraticCurveTo(285, 160, 256, 199);
      ctx.quadraticCurveTo(285, 195, 312, 205);
      ctx.fill();
      var lineGradient1 = ctx.createLinearGradient(290, 201, 285, 216);
      lineGradient1.addColorStop(0, '#f1dad2');
      lineGradient1.addColorStop(1, '#e8d8c9');
      ctx.fillStyle = lineGradient1;
      ctx.beginPath();
      ctx.moveTo(312, 205);
      ctx.quadraticCurveTo(265, 230, 256, 199);
      ctx.quadraticCurveTo(285, 195, 312, 205);
      ctx.fill();
      ctx.beginPath();
      ctx.fillStyle = "#000";
      ctx.arc(300, 204, 3, 0, 2 * Math.PI);
      ctx.fill();
      ctx.beginPath();
      ctx.moveTo(309, 195);
      ctx.quadraticCurveTo(285, 160, 256, 199);
      ctx.quadraticCurveTo(285, 195, 312, 205);
      ctx.stroke();
      ctx.beginPath();
      ctx.moveTo(256, 199);
      ctx.quadraticCurveTo(265, 225, 300, 213);
      ctx.stroke();
    }

    function lineGradient(ctx, x1, y1, x2, y2, color1, color2, color3, color4) {
      var lineGradient11 = ctx.createLinearGradient(x1, y1, x2, y2);
      lineGradient11.addColorStop(0, color1);
      lineGradient11.addColorStop(0.4, color2);
      lineGradient11.addColorStop(0.8, color3);
      lineGradient11.addColorStop(1, color4);
      ctx.fillStyle = lineGradient11;
      ctx.beginPath();
    }
  </script>
</body>

</html>